<template>
    <div class="app-container" >
        <el-tabs v-model="tabKey" class="tabs-top" @tab-change="handleClick">
      <el-tab-pane label="未结项" name="1"></el-tab-pane>
      <el-tab-pane label="已结项" name="2"></el-tab-pane>
    </el-tabs>
       <el-row :gutter="20">
          <!--用户数据-->
          <el-col  :xs="24">
             <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" >
                <el-form-item  prop="id">
                   <el-input
                      v-model="queryParams.id"
                      placeholder="请输入担保编号"
                      clearable
                      style="width: 200px"
                      @keyup.enter="handleQuery"
                   />
                </el-form-item>
                <el-form-item   prop="name_tel">
                   <el-input
                      v-model="queryParams.name_tel"
                      placeholder="请输入姓名/手机号"
                      clearable
                      style="width: 200px"
                      @keyup.enter="handleQuery"
                   />
                </el-form-item>
                <el-form-item  prop="contract_code">
                   <el-input
                      v-model="queryParams.contract_code"
                      placeholder="合同号"
                      clearable
                      style="width: 200px"
                      @keyup.enter="handleQuery"
                   />
                </el-form-item>
              
                <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                   <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
             </el-form>
             <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                   <el-button
                      type="warning"
                      plain
                      icon="Upload"
                      @click="handleExport"
                      v-hasPermi="['system:user:export']"
                   >导出</el-button>
                </el-col> -->
                <right-toolbar  v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
             </el-row>
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="担保编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
                <el-table-column label="姓名" align="center" key="user_name" prop="user_name" v-if="columns[1].visible"  />
                <el-table-column label="合同号" align="center" key="contract_code" prop="contract_code" v-if="columns[2].visible"  />
                <el-table-column label="合同金额" align="center" key="contract_amount" prop="contract_amount" v-if="columns[3].visible"  />
                <el-table-column label="担保期限" align="center" key="loan_stages" prop="loan_stages" v-if="columns[4].visible"  />
                <el-table-column label="担保类型" align="center" key="loan_type_name" prop="loan_type_name" v-if="columns[5].visible"  />
                <el-table-column label="还款方式" align="center" key="method_type" prop="method_type" v-if="columns[6].visible"  />
                <el-table-column label="放款时间" align="center" key="loan_time" prop="loan_time" v-if="columns[7].visible"  />
                <el-table-column label="放款方式" align="center" key="channel_type" prop="channel_type" v-if="columns[8].visible"  />
                <el-table-column label="还款状态" align="center" key="grace_full_ind" prop="grace_full_ind" v-if="columns[9].visible"  >
                  <template #default="scope">
                      <div v-if="scope.row.grace_full_ind=='1'">还款中</div>
                      <div v-else >{{ scope.row.grace_full_ind }}</div>
                   </template>
               </el-table-column>
                <el-table-column label="是否结项" align="center" key="closed" prop="closed" v-if="columns[10].visible"  > 
                  <template #default="scope">
                      <div v-if="scope.row.closed=='0'">否</div>
                      <div v-else >是</div>
                   </template>
               </el-table-column>
                <el-table-column label="结项时间" align="center" key="close_time" prop="close_time" v-if="columns[11].visible"  />
                <el-table-column label="担保评分" align="center" key="score" prop="score" v-if="columns[12].visible"  />
                <el-table-column label="风控结项评语" align="center" key="comment" prop="comment" v-if="columns[13].visible" :show-overflow-tooltip="true" />
                <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding fixed-width">
                   <template #default="scope">
                      <el-tooltip content="查看" placement="top" >
                         <el-button link type="primary" icon="View" @click="handleRefund(scope.row,true)" v-hasPermi="['system:user:edit']"></el-button>
                      </el-tooltip>
                      <el-tooltip v-if="tabKey=='1'" content="结项办理" placement="top">
                         <el-button link type="primary" icon="Finished" @click="handleRefund(scope.row,false)" v-hasPermi="['system:user:remove']"></el-button>
                      </el-tooltip>
                   </template>
                </el-table-column>
             </el-table>
             <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.page_size"
                v-model:limit="queryParams.page_count"
                @pagination="getList"
             />
          </el-col>
       </el-row>
       <!-- 用户导入对话框 -->
       <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
          <el-upload
             ref="uploadRef"
             :limit="1"
             accept=".xlsx, .xls"
             :headers="upload.headers"
             :action="upload.url + '?updateSupport=' + upload.updateSupport"
             :disabled="upload.isUploading"
             :on-progress="handleFileUploadProgress"
             :on-success="handleFileSuccess"
             :auto-upload="false"
             drag
          >
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             <template #tip>
                <div class="el-upload__tip text-center">
                   <div class="el-upload__tip">
                      <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                   </div>
                   <span>仅允许导入xls、xlsx格式文件。</span>
                   <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
                </div>
             </template>
          </el-upload>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
             </div>
          </template>
       </el-dialog>
       </div>
 </template>
 
 <script setup name="Finish">
 import { methodType ,channelType ,loanTypes } from '@/utils/dict'
 import { getToken } from "@/utils/auth";
 import { loanClosingList } from "@/api/afterLoan/index";
 const router = useRouter();
 const { proxy } = getCurrentInstance();
//  const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
 const userList = ref([]);
 const tabKey = ref('1');
 const loading = ref(false);
 const showSearch = ref(true);
 const total = ref(6);
 /*** 用户导入参数 */
 const upload = reactive({
   // 是否显示弹出层（用户导入）
   open: false,
   // 弹出层标题（用户导入）
   title: "",
   // 是否禁用上传
   isUploading: false,
   // 是否更新已经存在的用户数据
   updateSupport: 0,
   // 设置上传的请求头部
   headers: { Authorization: "Bearer " + getToken() },
   // 上传的地址
   url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
 });
 // 列显隐信息
 const columns = ref([
  
 { key: 0, label: `担保编号`, visible: true },
  { key: 1, label: `姓名`, visible: true },
  { key: 2, label: `合同号`, visible: true },
  { key: 3, label: `合同金额`, visible: true },
  { key: 4, label: `担保期限`, visible: true },
  { key: 5, label: `担保类型`, visible: true },
  { key: 6, label: `还款方式`, visible: true },
  { key: 7, label: `放款时间`, visible: true },
  { key: 8, label: `放款方式`, visible: true },
  { key: 9, label: `还款状态`, visible: true },
  { key: 10, label: `是否结项`, visible: true },
  { key: 11, label: `结项时间`, visible: true },
  { key: 12, label: `担保评分`, visible: true },
  { key: 13, label: `风控结项评语`, visible: true }
 ]);
 
 const data = reactive({
   form: {},
   queryParams: {
      page_size: 1,
      page_count: 10,
      id: undefined,
      contract_code: undefined,
      user_name: undefined,
      user_phone: undefined,
      name_tel: undefined
   },
   rules: {
     userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
     nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
     remark: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],
     email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
     phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
   }
 });
 const { queryParams, form, rules } = toRefs(data);
  /**切换导航*/
function handleClick(key){
      tabKey.value = key;
      resetQuery();
}
 /** 查询用户列表 */
 function getList() {
           loading.value = true;
             queryParams.value.user_phone = queryParams.value.name_tel;
            queryParams.value.user_name = queryParams.value.name_tel;
         loanClosingList({
            ...queryParams.value,
            status:tabKey.value
            }).then(res => {
            loading.value = false;
            total.value = res.data.total_page;
            if(res.data.total_page>0){
               userList.value = res.data.list.map(item=>{
                     item['channel_type'] = channelType(item.channel);
                     item['method_type'] = methodType(item.method);
                     item['loan_type_name'] = loanTypes(item.loan_type)
                           return item;
               })
            }else{
               userList.value = []
            }
            });
 };;
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.page_size = 1;
   getList();
 };
 /** 重置按钮操作 */
 function resetQuery() {
     proxy.resetForm("queryRef");
     queryParams.value.start_time = '';
     queryParams.value.end_time = ''
     handleQuery();
 };
 /** 办理结项 */
 function handleRefund(row,val) {
      router.push({
         name:"Posp",
         state:{
        infos:{
         type: val,
         status: tabKey.value,
         id:row.id, 
         comment:row.comment, 
         score:row.score,
         debit_card_id:row.debit_card_id,
         purpose_name:row.purpose_name,
         approval_rate:row.approval_rate,
         user_name:row.user_name,
         loan_type_classify:row.loan_type_name.slice(0,2),
         loan_type_name:row.loan_type_name.slice(2,5),
         loan_stages: row.loan_stages+'个月',
         apply_quota: !row.apply_quota?row.apply_quota:row.apply_quota+'元',
         method_type:row.method_type,
         contract_amount:!row.contract_amount?row.contract_amount:row.contract_amount+"元",
         approval_amount:!row.approval_amount?row.approval_amount:row.approval_amount+'元'
        }
      }
      });
 };
 /** 勾选条数*/
 function handleSelectionChange (){
       
 }
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download("loan/export/loanClosingList", {
           ...queryParams.value,
            status:tabKey.value
  });
 };
 getList();
 onActivated(()=>{
   let timer = setTimeout(()=>{
     getList();
     clearTimeout(timer)
   },1100)
})
 </script>
 <style scoped>
 .explain{
    line-height: 40px;
    font-size: 12px;
    margin-left:90px;
 }
 </style>
 